<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>model</title>
</head>
<script src="./config.js"></script>
<script src="./3dEngine/js/3dEngine.demo.js"></script>
<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  html,body {
    height: 100%;
    width: 100%;
  }
  #viewer1 {
    width: 100%;
    height: 100%;
  }

  .tips_show {
    padding: 10px;
    background: url('./img/meter_bg.png') no-repeat center;
    background-size: contain;
    border-radius: 4px;
    position: absolute;
    top: -120px;
    right: 40px;
    filter: drop-shadow(1px 1px 7px #333);
    bottom: 0px;
    box-sizing: border-box;
    pointer-events: initial;
    font-size: 12px;
    color: #fff;
    text-align: left;
    width: 120px;
    height: 76px;
    font-family: Microsoft YaHei Regular;
    cursor: pointer;
  }

  .line {
    position: absolute;
    background: url('./img/meter_line.jpg') no-repeat center;
    background-size: contain;
    width: 73px;
    height: 54px;
    left: 75%;
    top: 90%;
  }
  .tips_show p {
    margin: 0;
    font-size: 12px;
    color: #FFFFFFD9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tips_show p:first-child {
    color: #84FEFF;
    font-size: 14px;
  }
  #percent {
    font-size: 35px;
    color: #0078D7;
    line-height: 100px;
    text-align: center;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 5px solid #0078D7;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: none;
  }
</style>
<body>
  <div id="viewer1"></div>
  <div id="percent"></div>
</body>
<script>
  var ws = new WebSocket(`${window.R_config.commonSocket}:8020`)
  ws.onopen = function() {
    // console.log('工艺区1 已连接')
  }
  var meters = [
    {
      bit: 'PT-120',
      pos: '8234.699591420142,-20874.21864202093,1427.9404365835896'
    },
    {
      bit: 'TE-251C',
      pos: '1515.3247534612783,-11320.018458767448,3484.506016159534'
    },
    {
      bit: 'TE-277',
      pos: '9264.488574603418,-14979.274125270702,1040.4885627406038'
    },
    {
      bit: 'PT-700',
      pos: '11828.828660494124,-17206.005165289418,2523.28655130951'
    },
    {
      bit: 'TE-252C',
      pos: '6426.992553084334,-11320.01844916429,3555.979966552354'
    },
    {
      bit: 'LT-700',
      pos: '10347.1954369507,-16613.73331357055,1249.8669422960043'
    },
  ]
  EngineConfig("viewer1", false);
  SetYup(true);
  SetLightMode(1);
  SetBackImg('./img/back.png');
  
  AddModel('http://model.richtechcn.com/bottle6/bottle6.json', '66');
  var offSetX = 4000;
  var offSetY = -11300;
  var offSetZ = -3000;

  AddEnvModel('https://model.richtechcn.com/spc1/spctest1.zb',offSetX,offSetY,offSetZ,true);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest2.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest3.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest4.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest5.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest6.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest7.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest8.zb',offSetX,offSetY,offSetZ,false);
  AddEnvModel('https://model.richtechcn.com/spc1/spctest9.zb',offSetX,offSetY,offSetZ,false);
  SetAutoRotate(true);
  function addLabel() {
    meters.forEach((n, index) => {
      var htmlStr = `<div id="tips_show" class='tips_show'>
        <p>${n.bit}</p>
        <p id="tag_${n.bit}"></p>
        <p class="p-value" id='QValue_${n.bit}'></p>
        <span class="line"></span>
        </div>`
        AddHtmlMarker(n.pos, htmlStr, 'marker' + index)
    })
  }
  function OnModelLoaded(tag) {
    SetView("6960.636837993001,-17705.636373752397,3939.2246676829545,-849.6275066427869,-31137.20590284994,-1587.5562449368615,-0.8833148300641152,5.207268503269076")

    var posArray = [];
    posArray.push('5658.32103641928,-20315.014381202007,1744.421388767074');
    posArray.push('7325.380346875233,-20238.18150378354,1751.644834986566');
    posArray.push('7298.1574080265,-20236.938623533908,3613.664423230436');
    posArray.push('7288.25570930863,-16947.12641681246,3680.919045938267');
    posArray.push('2834.981532775628,-16909.836379611595,3526.193426704089');
    posArray.push('2941.2046529319723,-16818.82424366256,1257.158352511271');
    posArray.push('2954.4073488468784,-16854.818982915272,1273.1720664437107');
    posArray.push('2966.819729259916,-12808.618198781944,1280.2031741427963');
    posArray.push('2959.9097054258436,-12708.77811024652,6927.416311495395');
    posArray.push('2973.6213979526474,-11424.708112790031,6972.291422371463');
    posArray.push('2977.8051856867814,-11208.574915409103,6393.06903453769');
    posArray.push('2718.7458574136836,-11277.028502535271,5600.782844190089');

    
    var posArray1 = [];

    posArray1.push('5658.979905973462,-18486.266859753407,1701.2820000261263');
    posArray1.push('7322.692790131689,-18351.41641165789,1746.3393936577459');
    posArray1.push('7292.330218717607,-18413.482582071905,3804.381085457566');
    posArray1.push('7284.491954776913,-16942.630485461876,3677.633351326165');
    posArray1.push('3899.74982435115,-16793.24073344816,3706.3193808400756');
    posArray1.push('3888.288314615098,-16923.08387673566,1342.1035358207864');
    posArray1.push('3900.4101586246325,-12543.21839191702,1270.5256985094757');
    posArray1.push('3918.5922667186433,-12423.123556460378,6909.225504816588');
    posArray1.push('5036.434790708943,-11337.740572804996,6900.944816565665');
    posArray1.push('4932.598098593021,-11081.790343176712,5590.027231162656');

    setTimeout(function () {
      AddFlow('flow0','./img/flow6.png',posArray,30);
      AddFlow('flow1','./img/flow3.png',posArray1,30);
    }, 1000)
      
    AddLiquidNode('tag0_6#tag0_7#tag0_8','liquid0',0,158,255,0.35);

    AddLiquidNode('tag0_2#tag0_3#tag0_4','liquid3',0,255,0,0.6);
    
    UpdateLiquidValue('liquid0',0.2,1.0, 100000,0,true);
    UpdateLiquidValue('liquid3',0.5,1.0, 100000,0.5,true);
  }
  function OnLoadModelProcess(value) {
    console.log(value)
    var a = document.getElementById('percent')
    a.innerText = Math.floor(value*100) + '%'
    if (value === 1) {
      a.style.display = 'none'
    } else {
      a.style.display = 'none'
    }
  }
  ws.onmessage = function(evt) {
    if (evt.data.includes('Echo')) return
    var dat = JSON.parse(evt.data)
    // console.log(dat)
    if (dat.Key === 'GetDeviceListData') {
      // console.log(JSON.parse(dat.Data))
      let dd = JSON.parse(dat.Data)
      dd.forEach(n => {
        if (document.getElementById(`tag_${n.DeviceName}`)) {
          document.getElementById(`tag_${n.DeviceName}`).innerText = n.TagDes
          document.getElementById(`QValue_${n.DeviceName}`).innerText = n.Qvalue + n.Unit || ''
        }
      })
    }
  }
  function OnClickPosition(position) {
    console.log('点击位置' + position)
  }
  setTimeout(() => {
        addLabel()
      }, 5000)
  setInterval(function(){
    var ping = {"type":"ping"}
    ws.send(JSON.stringify(ping))
  }, 50000)
</script>
</html>